
<template>
  <div class="finance-list-container">
    <div class="title-row flex-normal">
      <div :class="['title-content flex-center', currentModel.name == model.name && 'active']" 
      v-for="(model, index) in modelList" :key="index" @click="tabChange(model)">
        <span class="title-txt">{{ model.label }}</span>
      </div>
    </div>
    <div class="list-content">
      <div class="app-search-container clearfix">
        <!-- <div class="search-title fl">条件</div> -->
        <el-form class="search-form" :inline="true" size="small">
          <el-form-item v-for="(item, index) in currentModel.selectProp['selectList']" 
          :key="index" :label="item.label">
            <template v-if=" item.type == 'select'">
              <el-select v-model="currentModel['params'][item.name]" 
              :placeholder="item.placeholder" :clearable="item.clearable" filterable>
                <el-option v-for="(i, idx) in item.child" :key="idx" :label="i.dictLabel"
                  :value="i.dictCode"></el-option>
              </el-select>
            </template>
            <template v-if=" item.type == 'input'">
              <el-input v-model="currentModel['params'][item.name]" :placeholder="item.placeholder" clearable size="small" />
            </template>
          </el-form-item>
          <el-form-item>
            <el-button :type="btn.type" :icon="`el-icon-${btn.icon}`" :key="index"
              v-for="(btn, index) in currentModel.selectProp['btnList']" v-hasPermi="btn.permi" :loading="btn.loading"
              @click="btnTap(btn)" size='mini'>{{ btn.btnTxt }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-table-container" v-loading="currentModel.loading">
        <template v-if="currentModel.name == 'zdlb'">
          <el-table
          :data="currentModel.list" border header-row-class-name="app-table-list">
          <el-table-column
            label="商户"
            align="center"
            key="shopName"
            prop="shopName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="活动编号"
            align="center"
            key="activityCode"
            prop="activityCode"
            :show-overflow-tooltip="true" /> 
          <el-table-column
            label="活动日期"
            align="center"
            key="activityTime"
            prop="activityTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="账单日期"
            align="center"
            key="billTime"
            prop="billTime"
          />
          <el-table-column
            label="销售总额(元)"
            align="center"
            key="totalSales"
            prop="totalSales"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="佣金扣除(元)"
            align="center"
            key="commission"
            prop="commission"
          ></el-table-column>
          <el-table-column
            label="红包扣除(元)"
            align="center"
            key="redPackage"
            prop="redPackage"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="成交数"
            align="center"
            key="tradingVolume"
            prop="tradingVolume"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="结算金额(元)"
            align="center"
            key="settlementAmount"
            prop="settlementAmount"
            :show-overflow-tooltip="true"
          />
        </el-table>
        </template>
        <template v-if="currentModel.name == 'zjls'">
          <div class="zjls-item flex-column" v-for="(item, index) in currentModel.list" :key="index">
            <span class="item-label">交易编号：{{item.dealCode}}</span>
            <div class="item-content flex-between">
              <div class="left-content flex-column">
                <span class="label-txt">{{item.explain}}</span>
                <span class="desc-txt">{{item.dealTime}}</span>
              </div>
              <div class="center-content flex-between">
                <div class="center-item flex-column">
                  <span class="label-txt">出金单位：{{item.goUnit}}</span>
                  <span class="desc-txt">变动前余额：{{item.frontBalance}}</span>
                </div>
                <div class="center-item flex-column">
                  <span class="label-txt">入金单位：{{item.enterUnit}}</span>
                  <span class="desc-txt hidden">.</span>
                </div>
                <div class="center-item flex-column">
                  <span class="label-txt hidden">.</span>
                  <span class="desc-txt">变动后余额：{{item.laterBalance}}</span>
                </div>
              </div>
              <div class="right-content flex-column">
                <span class="label-txt">{{item.dealMoney}}</span>
                <span class="desc-txt hidden">.</span>
              </div>
            </div>
          </div>
        </template>
        <template v-if="currentModel.name == 'yhye'">
          <el-table
          :data="currentModel.list" border>
          <el-table-column
            label="账户名称"
            align="center"
            key="shopName"
            prop="shopName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="登录账号"
            align="center"
            key="account"
            prop="account"
            :show-overflow-tooltip="true" /> 
          <el-table-column
            label="更新日期"
            align="center"
            key="updateTime"
            prop="updateTime"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="账户余额"
            align="center"
            key="balance"
            prop="balance"
            width="120"
          />
        </el-table>
        </template>
        <pagination
          v-show="currentModel.total > 0"
          :total="currentModel.total"
          :page.sync="currentModel.params.pageNum"
          :limit.sync="currentModel.params.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getShopListDict
} from "@/api/common/index";
import {
  getBillList, getJournalList, getShopBalance, exportFinance
} from "@/api/financeManage/admin-finance.js";
const modelList = [
  {id: '1', label: '活动账单', name: 'zdlb', selectProp: {"btnList": [
    {"isShow": true, "type": "primary", "loading": false, "permi": [], "action": "search-action", "btnTxt": "查询", "icon": "search"},
    {"isShow": true, "type": "primary", "loading": false, "permi": ['admin:finance:export'], "action": "export-action", "btnTxt": "导出", "icon": "download"}
  ], "selectList": [
    {"isShow": true, "clearable": true, "val": "", "placeholder": "请选择商户", "label": "商户", "name": "shopId", "type": "select", "child": [
      {"dictLabel": "全部", "dictCode": ""}
    ]},
    {"isShow": true, "clearable": true, "val": "", "placeholder": "", "label": "手机号", "name": "headPhone", "type": "input"}
  ]}, params: {pageNum: 1, pageSize: 10}, loading: false, total: 0, list: []},
  {id: '2', label: '资金流水', name: 'zjls', selectProp: {"btnList": [
    {"isShow": true, "type": "primary", "loading": false, "permi": [], "action": "search-action", "btnTxt": "查询", "icon": ""},
    {"isShow": true, "type": "primary", "loading": false, "permi": ['admin:finance:export'], "action": "export-action", "btnTxt": "导出", "icon": ""}
  ], "selectList": [
    {"isShow": true, "clearable": true, "val": "", "placeholder": "请选择商户", "label": "商户", "name": "shopId", "type": "select", "child": [
      {"dictLabel": "全部", "dictCode": ""}
    ]},
    {"isShow": true, "clearable": true, "val": "", "placeholder": "", "label": "交易编号", "name": "activityCode", "type": "input"},
    // {"isShow": true, "clearable": true, "val": "", "placeholder": "请选择结算状态", "label": "结算状态", "name": "verificationStatus", "type": "select", "child": [
    //   {"dictLabel": "全部", "dictCode": ""}
    // ]},
    {"isShow": true, "clearable": true, "val": "", "placeholder": "请输入登录账户", "label": "登录账号", "name": "account", "type": "input"}
  ]}, params: {pageNum: 1, pageSize: 10}, loading: false, total: 0, list: []},
  {id: '3', label: '用户余额', name: 'yhye', selectProp: {"btnList": [
    {"isShow": true, "type": "primary", "loading": false, "permi": [], "action": "search-action", "btnTxt": "查询", "icon": "search"},
    {"isShow": true, "type": "primary", "loading": false, "permi": ['admin:finance:export'], "action": "export-action", "btnTxt": "导出", "icon": "download"}
  ], "selectList": [
    {"isShow": true, "clearable": true, "val": "", "placeholder": "请选择账户", "label": "账户", "name": "shopId", "type": "select", "child": [
      {"dictLabel": "全部", "dictCode": ""}
    ]},
    {"isShow": true, "clearable": true, "val": "", "placeholder": "", "label": "手机号", "name": "headPhone", "type": "input"}
  ]}, params: {pageNum: 1, pageSize: 10}, loading: false, total: 0, list: []}
]
export default {
  data() {
    return {
      currentModel: modelList[0],
      modelList: modelList
    };
  },
  mounted(){
    let _self = this
    _self.queryShopList()
    _self.getList()
  },
  methods: {
    exportFinance(){
      let _self = this
      let {id, label, params} = _self.currentModel
      let query = {
        exportType: id, 
        shopId: params['shopId'] || '',
        headPhone: params['headPhone'] || ''
      }
      exportFinance(query, label).then(res => {
        console.log(res)
      })
    },
    queryShopList(){
      let _self = this
      getShopListDict().then(res => {
        let list = res.data.map(i => {
          return {
            dictCode: i.id,
            dictLabel: i.shopName
          }
        })
        _self.modelList.forEach(model => {
          model['selectProp']['selectList'].forEach(search => {
            if(search.name == 'shopId'){
              search.child = [...search.child, ...list]
            }
          })
        })
      })
    },
    tabChange(tab){
      let _self = this
      _self.currentModel = tab
      _self.getList();
    },
    // 搜索条件查询
    btnTap(prop) {
      if(prop.action == 'search-action'){
        let {params} = this.currentModel
        params.pageNum = 1
        this.getList()
      }else {
        this.exportFinance()
      }
    },
    /** 查询列表 */
    async getList() {
      let _self = this, apiFn = Function
      let {name, params} = _self.currentModel
      if(name == 'zdlb'){
        apiFn = getBillList
      } else if(name == 'zjls') {
        apiFn = getJournalList
      }else if(name == 'yhye'){
        apiFn = getShopBalance
      }
      _self.currentModel.loading = true
      await apiFn(params).then(res => {
        let {rows, total} = res
        _self.currentModel.list = rows
        _self.currentModel.total = total
      })
      _self.currentModel.loading = false
    },
  }
};
</script>
<style scoped lang="scss">
.finance-list-container {
  margin-top: vh(24);
  .title-row{
    margin-bottom: vh(10);
    .title-content{
      position: relative;
      padding: 0 vw(10) vh(12);
      margin-right: vw(50);
      transition: .2s;
      &.active{
        &::after{
          background-color: #3B3DCC;
        }
        .title-txt{
          color: #3B3DCC;
        }
      }
      &::after{
        content: "";
        width: vh(8);
        height: vh(8);
        border-radius: 50%;
        background-color: transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }
      .title-txt{
        color: #6E7191;
        font-size: vh(16);
        cursor: pointer;
      }
    }
  }
  .zjls-item{
    padding: vh(10) vw(30);
    background-color: rgba(2, 86, 255, 0.04);
    margin-bottom: vh(10);
    .item-label{
      font-size: vh(12);
      color: #7F7F7F;
    }
    .item-content{
      margin-top: vh(10);
      .center-content{
        width: 40%;
      }
      .hidden{
        color: transparent !important;
      }
      .label-txt{
        color: #3E3E3E;
        font-size: 13px;
        margin-bottom: vh(8);
      }
      .desc-txt{
        color: #7F7F7F;
        font-size: vh(12);
      }
    }
  }
}
</style>